<template>
  <div id="app">
    <el-row class="nav">
      <!-- 用ref来修改子元素type的时候vue不建议我直接修改dom-->
      <el-button :type="pagenum > -1 ? 'primary' : ''">前言</el-button>
      <el-button :type="pagenum > 0 ? 'primary' : ''">计划</el-button>
      <el-button :type="pagenum > 1 ? 'primary' : ''">1</el-button>
      <el-button :type="pagenum > 2 ? 'primary' : ''">2</el-button>
      <el-button :type="pagenum > 3 ? 'primary' : ''">3</el-button>
      <el-button :type="pagenum > 4 ? 'primary' : ''">4</el-button>
      <el-button :type="pagenum > 5 ? 'primary' : ''">5</el-button>
      <el-button :type="pagenum > 6 ? 'primary' : ''">6</el-button>
      <el-button :type="pagenum > 7 ? 'primary' : ''">7</el-button>
      <el-button :type="pagenum > 8 ? 'primary' : ''">8</el-button>
    </el-row>

    <!-- 按钮部分 -->
    <el-button-group class="pagebtn" v-if="pagenum == 1">
      <el-button type="primary" @click="nextpage()"
        >完成计划，开始解题</el-button
      >
    </el-button-group>
    <el-button-group class="pagebtn" v-if="pagenum > 1">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        @click="backpage()"
        :disabled="pagenum > 9"
        >上一页</el-button
      >
      <el-button type="primary" @click="nextpage()" :disabled="pagenum > 9"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
    </el-button-group>
    <div class="cxt" v-if="pagenum == 0">
      <div class="horizontalline"></div>

      <div class="leftcxt">
        <div class="felxbox">
          <img
            src="./assets/img/1.png"
            alt=""
            style="height:680px;margin:50px 0px 0px 50px;"
          />
        </div>
      </div>
      <div class="rightcxt">
        <div
          :span="10"
          style="margin-top:200px;margin-left:200px;width:500px;"
          class="size text"
        >
          <h3>
            学校举行运动会，五位同学参加了50米跑、实心球、立定跳远三项比赛，体育王老师需要计算他们的综合成绩并进行排名。你来帮助王老师解决一下这个问题吧！
            【你可以通过点击、拖动、输入等方式来完成题目的作答】
          </h3>
          <br />
          <el-button
            type="primary"
            @click="nextpage()"
            class="button2"
            style="margin:50px 160px;"
            >开始答题</el-button
          >
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-show="pagenum == 1">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img
          src="./assets/img/1.png"
          alt=""
          style="height:680px;margin:50px 0px 0px 50px;"
        />
      </div>

      <div class="rightcxt">
        <div class="title flexbox">
          <h2>
            计划
          </h2>
        </div>
        <div class="text flexbox">
          为了对五位同学的综合成绩进行排名，请你先计划一下解决问题的过程。
          【点击下方每一步的下拉按钮，选择每一步要做的事情。完成后，请点击“完成计划，开始解题”。】
        </div>
        <div style="font-size:36px;margin:50px 200px;">
          我的顺序：
        </div>

        <div class="answerimg">
          <Drag></Drag>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>

    <div class="cxt" v-if="pagenum == 2">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img
          src="./assets/img/1.png"
          alt=""
          style="height:300px;margin-left:180px;"
        />
      </div>
      <div class="picture-buttom">
        <img src="./assets/img/2.png" alt="" style="height:370px" />
      </div>

      <div class="rightcxt">
        <div class="title flexbox"><h2>第1题【单选题】</h2></div>
        <div class="text flexbox">
          你收集到了五位同学在50米跑、实心球、立定跳远三项比赛中的原始成绩。<br />
          请你选出各个项目中成绩最好的同学。
        </div>

        <div style="  border: 3px solid #000;margin-top:10px;">
          <div class="p1choosebox">
            <div style="font-size:20px">
              50米跑项目中成绩最好的同学是：
            </div>

            <div class="p1choose optionbox ">
              <el-radio-group v-model="$store.state.answer[1]"  @change="updata()">
                <el-radio-button label="0">小王</el-radio-button>
                <el-radio-button label="1">小明</el-radio-button>
                <el-radio-button label="2">小张</el-radio-button>
                <el-radio-button label="3">小李</el-radio-button>
                <el-radio-button label="4">小华</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div style="  border: 3px solid #000;margin-top:10px;">
          <div class="p1choosebox">
            <div style="font-size:20px">
              实心球项目中成绩最好的同学是：
            </div>

            <div class="p1choose optionbox ">
              <el-radio-group v-model="$store.state.answer[2]"  @change="updata()">
                <el-radio-button label="0">小王</el-radio-button>
                <el-radio-button label="1">小明</el-radio-button>
                <el-radio-button label="2">小张</el-radio-button>
                <el-radio-button label="3">小李</el-radio-button>
                <el-radio-button label="4">小华</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div style="  border: 3px solid #000;margin-top:10px;">
          <div class="p1choosebox">
            <div style="font-size:20px">
              立定跳远项目中成绩最好的同学是： ：
            </div>

            <div class="p1choose optionbox ">
              <el-radio-group v-model="$store.state.answer[3]"  @change="updata()">
                <el-radio-button label="0">小王</el-radio-button>
                <el-radio-button label="1">小明</el-radio-button>
                <el-radio-button label="2">小张</el-radio-button>
                <el-radio-button label="3">小李</el-radio-button>
                <el-radio-button label="4">小华</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>

      <div class="verticalline"></div>
    </div>

    <div class="cxt" v-if="pagenum == 3">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img
          src="./assets/img/1.png"
          alt=""
          style="height:300px;margin-left:180px;"
        />
      </div>
      <div class="picture-buttom">
        <img src="./assets/img/2.png" alt="" style="height:370px" />
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第2题【单选题】</h2></div>
        <div class="text flexbox">
          你认为应该利用以下什么信息来计算五位同学的综合成绩？
        </div>
        <div class="optionbox">
          <el-radio v-model="$store.state.answer[4]" label="0"  @change="updata()">
            A.五位同学在某个比赛项目上的原始成绩 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[4]" label="1"  @change="updata()"
            >B.五位同学在某个比赛项目上的排名</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[4]" label="2"  @change="updata()"
            >C.五位同学在三个比赛项目上的原始成绩</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[4]" label="3"  @change="updata()"> 
            D.五位同学在三个比赛项目上的排名
          </el-radio>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 4">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/1.png" alt="" style="height:300px" />
        </div>
      </div>
      <div class="picture-buttom">
        <img src="./assets/img/2.png" alt="" style="height:370px" />
      </div>
      <div class="p3info">
        <el-tag style="background-color: #409EFF;">你根据的信息</el-tag>
        <div class="p3expressionbox">
          <p>{{ p2choose[$store.state.answer[4]] }}</p>
        </div>
      </div>
      <div class="rightcxt" v-if="$store.state.answer[4] == 0"  >
        <div class="title flexbox"><h2>第3题【单选题】</h2></div>
        <div class="text flexbox" style="height:100px;">
          根据收集的信息，你想制定哪个规则来计算学生的综合成绩？
        </div>
        <div class="optionbox">
          <div>
            <el-radio
              v-model="$store.state.answer[5]"
              label="0"
              @change="
                () => {
                  ifp3input = false;
              this.updata()
                }
              "
            >
              A. 将每位同学在某个比赛项目上的成绩作为综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[5]"
              label="1"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              B. 将每位同学在某个比赛项目上的成绩进行计算，<br />作为综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[5]"
              label="2"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              C. 将每位同学在三个比赛项目上的最好原始成绩进行计算，<br />作为综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[5]"
              label="3"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              D. 将每位同学在三个比赛项目上的最差原始成绩进行计算，<br />作为综合成绩
            </el-radio>
          </div>
        </div>
      </div>
      <div class="rightcxt" v-if="$store.state.answer[4] == 1"  >
        <div class="title flexbox"><h2>思考分析</h2></div>
        <div class="text flexbox" style="height:100px;">
          【单选题】根据收集的信息，你想制定哪个规则来计算学生的综合成绩？
        </div>
        <div class="optionbox">
          <div>
            <el-radio
              v-model="$store.state.answer[7]"
              label="0"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              A. 将每位同学在某个比赛项目上的排名作为综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[7]"
              label="1"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              B. 将每位同学在某个比赛项目上的排名进行计算，作<br />为综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[7]"
              label="2"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              C. 将每位同学在三个比赛项目上的最好排名进行计算，<br />作为综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[7]"
              label="3"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              D. 将每位同学在三个比赛项目上的最差排名进行计算，<br />作为综合成绩
            </el-radio>
          </div>
        </div>
      </div>
      <div class="rightcxt" v-if="$store.state.answer[4] == 2"  >
        <div class="title flexbox"><h2>思考分析</h2></div>
        <div class="text flexbox" style="height:100px;">
          【单选题】根据收集的信息，你想制定哪个规则来计算学生的综合成绩？
        </div>
        <div class="optionbox">
          <div>
            <el-radio
              v-model="$store.state.answer[9]"
              label="0"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              A. 将每位同学在三个比赛项目上的原始成绩直接相加，<br />获得综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[9]"
              label="1"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              B. 将每位同学在三个比赛项目上的原始成绩直接相乘，<br />获得综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[9]"
              label="2"
              style="  padding-bottom: 20px;"              this.updata()
              @change="
                () => {
                  ifp3input = false;
                }
              "
            >
              C. 将每位同学在三个比赛项目上最好与最差的原始成<br />
              绩直接相减，获得综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[9]"
              label="3"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              D. 将每位同学在三个比赛项目上的原始成绩进行其它<br />计算，获得综合成绩
            </el-radio>
          </div>
        </div>
      </div>
      <div class="rightcxt" v-if="$store.state.answer[4] == 3" >
        <div class="title flexbox"><h2>思考分析</h2></div>
        <div class="text flexbox" style="height:100px;">
          【单选题】根据收集的信息，你想制定哪个规则来计算学生的综合成绩？
        </div>
        <div class="optionbox">
          <div>
            <el-radio
              v-model="$store.state.answer[11]"
              label="0"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              A. 将每位同学在三个比赛项目的排名直接相加，获得<br />综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[11]"
              label="1"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              B. 将每位同学在三个比赛项目的排名直接相乘，获得<br />综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[11]"
              label="2"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              C.将每位同学在三个比赛项目上最好与最差的排名直<br />接相减，获得综合成绩
            </el-radio>
            <el-radio
              v-model="$store.state.answer[11]"
              label="3"
              style="  padding-bottom: 20px;"
              @change="
                () => {
                  ifp3input = false;              this.updata()
                }
              "
            >
              D.将每位同学在三个比赛项目的排名进行其它计算，<br />获得综合成绩
            </el-radio>
          </div>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 5">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/1.png" alt="" style="height:300px" />
      </div>
      <div class="picture-buttom">
        <img src="./assets/img/2.png" alt="" style="height:370px" />
      </div>
      <div class="p3info">
        <el-tag style="background-color: #409EFF;">你选择的规则</el-tag>
        <div class="p3expressionbox">
          <p v-if="$store.state.answer[4] == 0">
            {{ A2p3choose[$store.state.answer[5]] }}
          </p>
          <p v-if="$store.state.answer[4] == 1">
            {{ B2p3choose[$store.state.answer[7]] }}
          </p>
          <p v-if="$store.state.answer[4] == 2">
            {{ C2p3choose[$store.state.answer[9]] }}
          </p>
          <p v-if="$store.state.answer[4] == 3">
            {{ D2p3choose[$store.state.answer[11]] }}
          </p>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第4题【单选题】</h2></div>
        <div class="text flexbox">
          根据你选择的规则，列出每位同学综合成绩的表达式。<br />
          例如：某位同学的平均排名=（这位同学50米跑的排名+这位同学实心球的排名+这位同学立定跳远的排名）÷3
        </div>
        <div class="flexbox">
          <Computer1 v-if="$store.state.answer[4] == 0" />
          <Computer2 v-if="$store.state.answer[4] == 1" />
          <Computer3 v-if="$store.state.answer[4] == 2" />
          <Computer4 v-if="$store.state.answer[4] == 3" />
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 6">
      <div class="horizontalline"></div>

      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/1.png" alt="" style="height:300px" />
        </div>
      </div>
      <div class="picture-buttom">
        <img src="./assets/img/2.png" alt="" style="height:370px" />
      </div>
      <div class="p3info">
        <el-tag style="background-color: #409EFF;">你的表达式</el-tag>
        <div class="p3expressionbox">
          <p v-if="$store.state.answer[4] == 0">
            每位同学的综合成绩= {{ $store.state.answer[6] }}
          </p>
          <p v-if="$store.state.answer[4] == 1">
            每位同学的综合成绩= {{ $store.state.answer[8] }}
          </p>
          <p v-if="$store.state.answer[4] == 2">
            每位同学的综合成绩= {{ $store.state.answer[10] }}
          </p>
          <p v-if="$store.state.answer[4] == 3">
            每位同学的综合成绩= {{ $store.state.answer[12] }}
          </p>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第5题【填空题】</h2></div>
        <div class="text flexbox">
          根据你列出的综合成绩表达式，计算出五位同学的综合成绩，将计算结果填写在对应的作答框中。
          注：如结果为无限小数，仅保留一位小数。
        </div>
        <div class="flexbox">
          <Computer5 />
        </div>
      </div>
      <div class="verticalline"></div>
    </div>

    <div class="cxt" v-if="pagenum == 7">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/1.png" alt="" style="height:300px" />
        </div>
      </div>
      <div class="picture-buttom">
        <img src="./assets/img/2.png" alt="" style="height:370px" />
      </div>
      <div class="p3info">
        <el-tag style="background-color: #409EFF;">综合成绩</el-tag>
        <div class="p3expressionbox">
          <p>小王：{{ $store.state.answer[13] }}</p>
          <p>小明：{{ $store.state.answer[14] }}</p>
          <p>小张：{{ $store.state.answer[15] }}</p>
          <p>小李：{{ $store.state.answer[16] }}</p>
          <p>小华：{{ $store.state.answer[17] }}</p>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第6题【选择题】</h2></div>
        <div class="text flexbox">
          根据你计算出的五位同学的综合成绩，给大家做出排名。<br />
          注：如果出现两人或多人并列，那么排在之后的同学会根据人数向后排名。例如小王与小明并列第1，那么下一名的小李则为第3。
        </div>

        <div style="font-size:36px;margin:50px 200px;">
          我的排名：
        </div>
        <Dr></Dr>
      </div>

      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 8">
      <div class="horizontalline"></div>

      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/1.png" alt="" style="height:300px" />
        </div>
      </div>
      <div class="picture-buttom">
        <img src="./assets/img/3.png" alt="" style="height:326px" />
      </div>
      <div class="p3info">
        <el-tag style="background-color: #409EFF;">你的表达式</el-tag>
        <div class="p3expressionbox">
          <p v-if="$store.state.answer[4] == 0">
            每位同学的综合成绩= {{ $store.state.answer[6] }}
          </p>
          <p v-if="$store.state.answer[4] == 1">
            每位同学的综合成绩= {{ $store.state.answer[8] }}
          </p>
          <p v-if="$store.state.answer[4] == 2">
            每位同学的综合成绩= {{ $store.state.answer[10] }}
          </p>
          <p v-if="$store.state.answer[4] == 3">
            每位同学的综合成绩= {{ $store.state.answer[12] }}
          </p>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第7题【填空题】</h2></div>
        <div class="text flexbox" style="height:200px">
          如果小刘同学也加入了综合成绩的排名中，根据你列出的综合成绩表达式，计算出五位同学的综合成绩，将计算结果填写在对应的作答框中。<br />
          注：如果出现两人或多人并列，那么排在之后的同学会根据人数向后排名。例如小王与小明并列第1，那么下一名的小李则为第3。
        </div>
        <div class="flexbox" style="margin-top:-20px;">
          <Computer6 />
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 9">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/1.png" alt="" style="height:300px" />
        </div>
      </div>
      <div class="picture-buttom">
        <img src="./assets/img/3.png" alt="" style="height:326px" />
      </div>
      <div class="p3info">
        <el-tag style="background-color: #409EFF;">综合成绩</el-tag>
        <div class="p3expressionbox">
          <p>小王：{{ $store.state.answer[19] }}</p>
          <p>小明：{{ $store.state.answer[20] }}</p>
          <p>小张：{{ $store.state.answer[21] }}</p>
          <p>小李：{{ $store.state.answer[22] }}</p>
          <p>小华：{{ $store.state.answer[23] }}</p>
          <p>小刘：{{ $store.state.answer[24] }}</p>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第8题【选择题】</h2></div>
        <div class="text flexbox">
          根据你计算出的六位同学的综合成绩，给大家做出排名。<br />
          注：如果出现两人或多人并列，那么排在之后的同学会根据人数向后排名。例如小王与小明并列第1，那么下一名的小李则为第3。
        </div>
        <div style="font-size:36px;margin:50px 200px;">
          我的排名：
        </div>
        <Drr></Drr>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 10">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="felxbox">
          <img
            src="./assets/img/1.png"
            alt=""
            style="height:680px;margin:50px 0px 0px 50px;"
          />
        </div>
      </div>
      <div class="rightcxt">
        <div
          :span="10"
          style="margin-top:200px;margin-left:200px;width:500px;"
          class="size"
        >
          <h3>
            聪明的小朋友，谢谢你帮我给同学们做出了排名！
          </h3>
          <br />
            <div
              class="fontsize30 lastbtn"
              >请先点击下方的【提交答案】，再点击【进入下一题】。</div>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
  </div>
</template>

<script>
import Drag from "./components/Drag";
import Computer1 from "./components/Computer1";
import Computer2 from "./components/Computer2";
import Computer3 from "./components/Computer3";
import Computer4 from "./components/Computer4";
import Computer5 from "./components/Computer5";
import Computer6 from "./components/Computer6";
import Dr from "./components/Dr";
import Drr from "./components/Drr";

export default {
  name: "App",
  components: {
    Drag,
    Computer1,
    Computer2,
    Computer3,
    Computer4,
    Computer5,
    Computer6,
    Dr,
    Drr,
  },
  data() {
    return {
      pagenum: 0, //页数
      //第二页的文字选项
      p2choose: [
        "五位同学在某个比赛项目上的原始成绩",
        "五位同学在某个比赛项目上的排名",
        "五位同学在三个比赛项目上的原始成绩",
        "五位同学在三个比赛项目上的排名",
      ],
      //因为第4页要第3页的文字
      A2p3choose: [
        "将每位同学在某个比赛项目上的成绩作为综合成绩",
        "将每位同学在某个比赛项目上的成绩进行计算，作为综合成绩",
        "将每位同学在三个比赛项目上的最好原始成绩进行计算，作为综合成绩",
        "将每位同学在三个比赛项目上的最差原始成绩进行计算，作为综合成绩",
      ],
      B2p3choose: [
        "将每位同学在某个比赛项目上的排名作为综合成绩",
        "将每位同学在某个比赛项目上的排名进行计算，作为综合成绩",
        "将每位同学在三个比赛项目上的最好排名进行计算，作为综合成绩",
        "将每位同学在三个比赛项目上的最差排名进行计算，作为综合成绩",
      ],
      C2p3choose: [
        "将每位同学在三个比赛项目上的原始成绩直接相加，获得综合成绩",
        "将每位同学在三个比赛项目上的原始成绩直接相乘，获得综合成绩",
        "将每位同学在三个比赛项目上最好与最差的原始成绩直接相减，获得综合成绩",
        "将每位同学在三个比赛项目上的原始成绩进行其它计算，获得综合成绩",
      ],
      D2p3choose: [
        "将每位同学在三个比赛项目的排名直接相加，获得综合成绩",
        "将每位同学在三个比赛项目的排名直接相乘，获得综合成绩",
        "将每位同学在三个比赛项目上最好与最差的排名直接相减，获得综合成绩",
        "将每位同学在三个比赛项目的排名进行其它计算，获得综合成绩",
      ],
    };
  },
  methods: {
    updata() {
      this.$store.state.pagenum = this.pagenum;
      console.log(this.pagenum, this.$store.state.answer);
      parent.postMessage(this.$store.state, "*");
    },
    nextpage() {
      this.pagenum += 1;
      //提示判断
      // if (
      //   this.pagenum === 2 &&
      //   (this.$store.state.answer[0][0] == "-1" ||
      //     this.$store.state.answer[0][1] == "-1" ||
      //     this.$store.state.answer[0][2] == "-1" ||
      //     this.$store.state.answer[0][3] == "-1")
      // ) {
      //   this.nextopen();
      // } else if (
      //   this.pagenum == 3 &&
      //   (this.$store.state.answer[1] == "-1" ||
      //     this.$store.state.answer[2] == "-1" ||
      //     this.$store.state.answer[3] == "-1")
      // ) {
      //   this.nextopen();
      // } else if (this.pagenum == 4 && this.$store.state.answer[4] == "-1") {
      //   this.nextopen();
      // } else if (this.pagenum == 5) {
      //   if (
      //     this.$store.state.answer[4] == 0 &&
      //     this.$store.state.answer[5] == "-1"
      //   ) {
      //     this.nextopen();
      //   } else if (
      //     this.$store.state.answer[4] == 1 &&
      //     this.$store.state.answer[7] == "-1"
      //   ) {
      //     this.nextopen();
      //   } else if (
      //     this.$store.state.answer[4] == 2 &&
      //     this.$store.state.answer[9] == "-1"
      //   ) {
      //     this.nextopen();
      //   } else if (
      //     this.$store.state.answer[4] == 3 &&
      //     this.$store.state.answer[11] == "-1"
      //   ) {
      //     this.nextopen();
      //   }
      // } else if (this.pagenum == 6) {
      //   if (
      //     this.$store.state.answer[4] == 0 &&
      //     this.$store.state.answer[6] == ""
      //   ) {
      //     this.nextopen();
      //   } else if (
      //     this.$store.state.answer[4] == 1 &&
      //     this.$store.state.answer[8] == ""
      //   ) {
      //     this.nextopen();
      //   } else if (
      //     this.$store.state.answer[4] == 2 &&
      //     this.$store.state.answer[10] == ""
      //   ) {
      //     this.nextopen();
      //   } else if (
      //     this.$store.state.answer[4] == 3 &&
      //     this.$store.state.answer[12] == ""
      //   ) {
      //     this.nextopen();
      //   }
      // } else if (
      //   this.pagenum == 7 &&
      //   (this.$store.state.answer[13] == "" ||
      //     this.$store.state.answer[14] == "" ||
      //     this.$store.state.answer[15] == "" ||
      //     this.$store.state.answer[16] == "" ||
      //     this.$store.state.answer[17] == "")
      // ) {
      //   this.nextopen();
      // } else if (
      //   this.pagenum == 8 &&
      //   (this.$store.state.answer[18][0] == "-1" ||
      //     this.$store.state.answer[18][1] == "-1" ||
      //     this.$store.state.answer[18][2] == "-1" ||
      //     this.$store.state.answer[18][3] == "-1" ||
      //     this.$store.state.answer[18][4] == "-1")
      // ) {
      //   this.nextopen();
      // } else if (
      //   this.pagenum == 9 &&
      //   (this.$store.state.answer[19] == "" ||
      //     this.$store.state.answer[20] == "" ||
      //     this.$store.state.answer[21] == "" ||
      //     this.$store.state.answer[22] == "" ||
      //     this.$store.state.answer[23] == "" ||
      //     this.$store.state.answer[24] == "")
      // ) {
      //   this.nextopen();
      // } else if (this.pagenum == 10) {
      //   if (
      //     this.$store.state.answer[25][0] == "-1" ||
      //     this.$store.state.answer[25][1] == "-1" ||
      //     this.$store.state.answer[25][2] == "-1" ||
      //     this.$store.state.answer[25][3] == "-1" ||
      //     this.$store.state.answer[25][4] == "-1" ||
      //     this.$store.state.answer[25][6] == "-1"
      //   ) {
      //     this.nextopen();
      //   } else {
      //     this.pagenum -= 1;
      //     this.notarizeopen();
      //   }
      // }
      this.updata();
    },
    nextopen() {
      this.pagenum -= 1;
      this.$alert("这个问题你还没做完，请作答后再进入下一页吧！", "提示", {
        confirmButtonText: "确定",
      });
    },
    backpage() {
      this.pagenum -= 1;
      console.log(this.pagenum, this.$store.state.answer);
    },
    hintopen() {
      this.$alert(
        "你可以点击“虚拟键盘”中的信息和符号，即可输入到作答框中，点击“删除”即可向前删除一个字母（数字或运算符号） ",
        "提示信息",
        {
          confirmButtonText: "返回题目",
        }
      );
    },
    notarizeopen() {
      this.$confirm(
        "即将提交全部答案，确认无误请点击“提交全部答案”。",
        "提示",
        {
          confirmButtonText: "提交全部答案",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.pagenum += 1;
          this.$message({
            type: "success",
            message: "提交全部答案!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消",
          });
        });
    },
  },
};
</script>

<style scope>
#app {
  line-height: 36px;
  width: 1200px;
  height: 800px;
  font-size: 20px;
  font-weight: 1000;
}

.lastbtn {
  width: 520px;
  height: 80px;
  padding: 30px;
  font-size: 36px;
  font-family: "楷体";
  position: absolute;
  top: 100px;
  left: -40px;
  background-color: #f5f7ae;
}
.bg-purple {
  width: 100px;
  height: 60px;
  background: #d3dce6;
}
.el-checkbox,
.el-checkbox__input {
  position: relative;
  white-space: nowrap;
}
.multiselect label {
  width: 250px;
  height: 60px;
  line-height: 60px;
  border: 3px solid #000;
  background-color: transparent;
}
.multiselect .el-checkbox__label {
  font-size: 18px;
  font-weight: 1000;
}
.expressionbox {
  position: absolute;
  top: -650px;
  left: 360px;
  width: 200px;
  height: 200px;
  overflow: auto;
  background-color: #ecf5ff;
  border-color: #d9ecff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
}
.expressionbox span {
  height: 30px;
}
.p3expressionbox {
  width: 300px;
  height: 250px;
  overflow: auto;
  background-color: #d9ecff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  border: 3px solid #000;
  padding: 5px;
}
.p8optionchoose label {
  display: inline;
}
.p8optionchoose .el-radio__label {
  font-size: 20px !important;
  margin-top: 10px;
}
.p8optionchoose > div {
  width: 550px;
  height: 80px;
  margin: 10px;
  padding-top: 20px;
  background-color: #99cc99;
  font-size: 20px !important;
}
.p1choosebox {
  width: 560px;
}
.p1choose label {
  width: 90px;
  margin: 5px;
  margin-top: -20px;
}
.p1choose span {
  width: 90px;
  height: 60px;
  line-height: 30px;
  background-color: transparent;
  border: none !important;
  position: absolute;
  top: 0px !important;
  left: 0px !important;
}
.p3input input {
  position: absolute;
  top: -30px;
  left: 0px;
  width: 400px;
}
.p3info {
  position: absolute;
  top: 80px;
  left: 250px;
  width: 300px;
}
.p3info span {
  border: 3px solid #000;
  margin: 3px 0px;
}
</style>
